$ColorArr:inherit,#409EFF,#67C23A,#E6A23C,#F56C6C,#909399,#DCDFE6,#303133,#606266,#ffffff,#000000;
@for $i from 0 through 10 {
    .lh-#{$i*4}{line-height:$i*4px}
    .fz-#{$i*4}{font-size:$i*4px}
    
    .c-#{$i}{color:nth($ColorArr,$i+1)}
    .bg-#{$i}{background-color:nth($ColorArr,$i+1)}
    
    .w-#{$i*10}p{width:$i*10%; }
    .w-#{$i*100}{width:$i*100px; }
    
    .h-#{$i*10}p{height:$i*10%; }
    .h-#{$i*100}{height:$i*100px; }
    
    .b-#{$i}{ border: $i+px solid #DCDFE6; }
    .bt-#{$i}{ border-top: $i+px solid #DCDFE6; }
    .bb-#{$i}{ border-bottom: $i+px solid #DCDFE6; }
    .bl-#{$i}{ border-left: $i+px solid #DCDFE6; }
    .br-#{$i}{ border-right: $i+px solid #DCDFE6; }
    .b-tb-#{$i}{ border-top: $i+px solid #DCDFE6;border-bottom: $i+px solid #DCDFE6; }
    .b-lr-#{$i}{ border-left: $i+px solid #DCDFE6;border-right: $i+px solid #DCDFE6; }
    
    .m-#{$i*4} { margin: $i*4+px; }
    .mt-#{$i*4} { margin-top: $i*4+px; }
    .mb-#{$i*4} { margin-bottom: $i*4+px; }
    .ml-#{$i*4} { margin-left: $i*4+px; }
    .mr-#{$i*4} { margin-right: $i*4+px; }
    .m-tb-#{$i*4}{margin-top: $i*4+px;margin-bottom: $i*4+px; }
    .m-lr-#{$i*4}{margin-left: $i*4+px;margin-right: $i*4+px; }
    
    .p-#{$i*4} { padding: $i*4+px; }
    .pt-#{$i*4} { padding-top: $i*4+px; }
    .pb-#{$i*4} { padding-bottom: $i*4+px; }
    .pl-#{$i*4} { padding-left: $i*4+px; }
    .pr-#{$i*4} { padding-right: $i*4+px; }
    .p-tb-#{$i*4}{padding-top: $i*4+px;padding-bottom: $i*4+px; }
    .p-lr-#{$i*4}{padding-left: $i*4+px;padding-right: $i*4+px; }
    
  }